<template>
  <div class="document-management">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
          v-model="searchQuery"
          placeholder="搜索文档"
          style="width: 300px; margin-right: 20px;"
      />
      <el-upload
          action="/api/upload"
          :on-success="handleUploadSuccess"
          :show-file-list="false"
      >
        <el-button type="primary">上传文档</el-button>
      </el-upload>
    </div>

    <!-- 文档列表 -->
    <el-table :data="filteredDocuments" style="width: 100%">
      <el-table-column prop="name" label="文档名称" />
      <el-table-column prop="uploader" label="上传者" />
      <el-table-column prop="uploadTime" label="上传时间" />
      <el-table-column prop="fileSize" label="文件大小" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="downloadDocument(scope.row)">下载</el-button>
          <el-button type="danger" @click="deleteDocument(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 文档详情 -->
    <el-dialog v-model="detailVisible" title="文档详情" width="50%">
      <div v-if="selectedDocument">
        <h3>{{ selectedDocument.name }}</h3>
        <p><strong>上传者：</strong>{{ selectedDocument.uploader }}</p>
        <p><strong>上传时间：</strong>{{ selectedDocument.uploadTime }}</p>
        <p><strong>描述：</strong>{{ selectedDocument.description }}</p>
        <p><strong>版本历史：</strong></p>
        <ul>
          <li v-for="version in selectedDocument.versions" :key="version">
            {{ version }}
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 文档数据
const documents = ref([
  { id: 1, name: '需求文档', uploader: '张三', uploadTime: '2023-10-01', fileSize: '1.2MB', description: '这是项目的需求文档。', versions: ['v1.0 (10/01)', 'v2.0 (10/10)'] },
  { id: 2, name: '设计稿', uploader: '李四', uploadTime: '2023-10-05', fileSize: '2.5MB', description: '这是项目的设计稿。', versions: ['v1.0 (10/05)'] },
]);

// 搜索条件
const searchQuery = ref('');

// 筛选后的文档列表
const filteredDocuments = computed(() => {
  return documents.value.filter(document =>
      document.name.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});

// 文档详情
const selectedDocument = ref(null);
const detailVisible = ref(false);

// 上传文档成功
const handleUploadSuccess = (response) => {
  documents.value.push({
    id: documents.value.length + 1,
    name: response.fileName,
    uploader: '当前用户',
    uploadTime: new Date().toLocaleDateString(),
    fileSize: response.fileSize,
    description: '',
    versions: ['v1.0 (新上传)'],
  });
};

// 下载文档
const downloadDocument = (document) => {
  console.log('下载文档:', document.name);
  // 调用后端 API 下载文件
};

// 删除文档
const deleteDocument = (document) => {
  const index = documents.value.findIndex(doc => doc.id === document.id);
  documents.value.splice(index, 1);
};

// 查看文档详情
const showDocumentDetail = (document) => {
  selectedDocument.value = document;
  detailVisible.value = true;
};
</script>

<style scoped>
.document-management {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
}
</style>